/* 
 * 金币管理
 */
import React from 'react';
import { Pagination } from 'antd';
import Loading from '../../common/loading/Loading';
import './goldcoin.css';

class GoldCoin extends React.Component {
    state = {
        loading: false,
        count: 150,
        data: [
            {
                detail: '云市场跳票奖励',
                count: 100,
                date: '2016-07-01 11:09:09'
            },
            {
                detail: '新老用户感恩回馈赠送金币',
                count: 50,
                date: '2016-01-10 11:50:22'
            }
        ]
    }
    changePage = (page, pageSize) => {
        console.log('page', page);
        this.setState({
            data: [],
            loading: true
        }, () => {
            setTimeout(() => {
                this.setState({
                    loading: false
                })
                this.setState({
                    data: [
                        {
                            detail: '云市场跳票奖励',
                            count: 100,
                            date: '2016-07-01 11:09:09'
                        },
                        {
                            detail: '新老用户感恩回馈赠送金币',
                            count: 50,
                            date: '2016-01-10 11:50:22'
                        }
                    ]
                })
            }, 2000)
        })
    }
    render() {
        return (
            <div className="page gc">
                <div className="page-head">
                    <h3 className="page-title">金币管理<span className="gc-coin">拥有金币：<strong>{this.state.count}</strong> 枚</span></h3>
                </div>
                <div className="gc-wrap">
                    <div className="gc-tips">
                        <p>某某金币是为了感谢对某某云商突出贡献的资深用户，长期支持某某云商用户特别设置的优惠货币。</p>
                        <p>官方网站以及论坛、QQ群、微信以及微博会不定期举行活动，参与活动就有机会获得金币，某某金币无法直接购买，一枚币价值1.00元。</p>
                    </div>
                    <div className="gc-content">
                        <div className="page-table">
                            <div className="page-thead">
                                <div className="page-tr">
                                    <div className="page-td-30">标题内容</div>
                                    <div className="page-td-50">时间</div>
                                    <div className="page-td-20">提交类型</div>
                                </div>
                            </div>
                            <div className="page-tbody">
                                {
                                    this.state.data.map((item, index) => (
                                        <div className="page-tr" key={index}>
                                            <div className="page-td-30">{item.detail}</div>
                                            <div style={{textAlign: 'center'}} className="page-td-50">{item.count}</div>
                                            <div style={{textAlign: 'center'}} className="page-td-20">{item.date}</div>
                                        </div>
                                    ))
                                }
                                <Loading loading={this.state.loading} />
                            </div>
                        </div>
                        <div className="gc-pagination">
                            <Pagination
                                total={60}
                                showTotal={(total, range) => `共 ${total} 条数据 每页显示 10 条`}
                                onChange={this.changePage}
                                defaultCurrent={1}
                            />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default GoldCoin;